  <template>
    <div class="hardware-container">
      <div class="flex gap-20px">
        <MCard class="w-1/4" v-for="(item,index) in antennaDevinfo" :key="index">
          <template #header>
            <div class="header-title">
              <span>{{ t('deviceManage.hardware_info_label') }}{{ index+1 }}</span>
            </div>
          </template>    
          <div class="device-info-grid">
            <div 
              v-for="(config, key) in antennaDevinfoLabels" 
              :key="key"
              class="info-item"
            >
              <div class="info-label">{{ config.label }}</div>
              <div class="info-value">{{ item[key] || '123' }}</div>
            </div>
          </div>
        </MCard>
        <MCard class="w-1/4" v-for="(item,index) in antennaStatus" :key="index">
          <template #header>
            <div class="header-title">
              <span>{{ t('deviceManage.antenna_status_label') }}</span>
            </div>
          </template>
          <div class="device-info-grid">
            <div 
              v-for="(config, key) in antennaStatusLabels" 
              :key="key"
              class="info-item"
            >
              <div class="info-label">{{ config.label }}</div>
              <div class="info-value">{{ item[key] || '123' }}</div>
            </div>
          </div>
        </MCard>
        <MCard class="w-1/4">
          <template #header>
            <div class="header-title">
              <span>{{ t('deviceManage.antenna_fault_status_label') }}</span>
            </div>
          </template>
          <div class="device-info-grid">
            <div 
              v-for="(config, key) in antennaFaultStatusLabels" 
              :key="key"
              class="info-item"
            >
              <div class="info-label">{{ config.label }}</div>
              <div class="info-value">
                <template v-if="config.isCustom && config.enumValue">
                  {{ config.enumValue[antennaFaultStatus[key]] || antennaFaultStatus[key] || '123' }}
                </template>
                <template v-else>
                  {{ antennaFaultStatus[key] || '123' }}
                </template>
              </div>
            </div>
          </div>
        </MCard>
      </div>   
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'HardwareInformation',
  })
  </script>
  <script setup  lang="ts">
import { deviceApi } from '@/api/device'
import { useI18n } from 'vue-i18n'
import { getWebSocketInstance } from '@/utils/websocketExample'
const ws = getWebSocketInstance()
const { t } = useI18n()
const antennaDevinfo = ref<any>([])
const antennaDevinfoLabels = computed(():any=>{
  return {
     name:{
      label:t('deviceManage.device_name_label'),
      isCustom:false,
     }, 
     manufacturer:{
      label:t('deviceManage.device_manufacturer_label'),
      isCustom:false,
     },
     sn:{
      label:t('deviceManage.device_serial_number_label'),
      isCustom:false,
     },
     manufacturing_date:{
      label:t('deviceManage.device_manufacture_date_label'),
      isCustom:false,
     },
     soft_version:{
      label:t('deviceManage.software_version_label'),
      isCustom:false,
     },
     model:{
      label:t('deviceManage.device_model_label'),
      isCustom:false,
     },
    part_num:{
      label:t('deviceManage.device_part_number_label'),
      isCustom:false,
     },
     device_version:{
      label:t('deviceManage.device_version_label'),
      isCustom:false,
     },
     soft_part_num:{
      label:t('deviceManage.software_part_number_label'),
      isCustom:false,
     },
     complex_part_num:{
      label:t('deviceManage.complex_part_number_label'),
      isCustom:false,
     },
     complex_version:{
      label:t('deviceManage.complex_version_label'),
      isCustom:false,
     },
     soft_crc:{
      label:t('deviceManage.software_verification_code_label'),
      isCustom:false,
     },   
     manufacturer_code:{
      label:t('deviceManage.manufacturer_code_label'),
      isCustom:false,
     },
     type:{
      label:t('deviceManage.antenna_type_label'),
      isCustom:false,
     },
  }
})
async function getAntennaDevinfo(){
  try {
  const {data}= await deviceApi.reqPostAntennaDevinfo()
  antennaDevinfo.value = data.ant
  } catch (error) {}
}
const antennaStatus = ref<any>([])
const antennaStatusLabels = computed(():any=>{
  return {
    transmit_front_status_1:{
      label:t('deviceManage.transmit_panel1_status_label'),
      isCustom:false,
    },
    transmit_front_status_2:{
      label:t('deviceManage.transmit_panel2_status_label'),
      isCustom:false,
    },
    transmit_front_status_3:{
      label:t('deviceManage.transmit_panel3_status_label'),
      isCustom:false,
    },
    transmit_front_status_4:{
      label:t('deviceManage.transmit_panel4_status_label'),
      isCustom:false,
    },
    receive_front_status_1:{
      label:t('deviceManage.receive_panel1_status_label'),
      isCustom:false,
    },
    receive_front_status_2:{
      label:t('deviceManage.receive_panel2_status_label'),
      isCustom:false,
    },
    receive_front_status_3:{
      label:t('deviceManage.receive_panel3_status_label'),
      isCustom:false,
    },
    receive_front_status_4:{
      label:t('deviceManage.receive_panel4_status_label'),
      isCustom:false,
    },
    buc_warn:{
      label:t('deviceManage.buc_status_label'),
      isCustom:false,
    },
    bdc_warn:{
      label:t('deviceManage.bdc_status_label'),
      isCustom:false,
    },
    overtemp_warn:{
      label:t('deviceManage.overtemp_alarm_label'),
      isCustom:false,
    },   
    inertial_navigate_warn:{
      label:t('deviceManage.imu_alarm_label'),
      isCustom:false,
    },
    temp:{
      label:t('deviceManage.temp_label'),
      isCustom:false,
    },
  }
})
async function getAntennaStatus(data:any){
  antennaStatus.value = data.ant
}
const antennaFaultStatus = ref<any>({})
const antennaFaultStatusLabels = computed(():any=>{
  return {
    attitude: {
      label: t('deviceManage.attitude_label'),
      isCustom: true, 
      enumValue:{
        normal:t('deviceManage.normal_label'),
        abnormal:t('deviceManage.abnormal_label'),
      }
    },
    location: {
      label: t('deviceManage.location_label'),
      isCustom: false,
    },
    time_service: {
      label: t('deviceManage.time_service_label'),
      isCustom: false,
    },
    fan: {
      label: t('deviceManage.fan_label'),
      isCustom: false,
    },
    temp_0: {
      label: t('deviceManage.temp_0_label'),
      isCustom: false,
    },
    temp_1: {
      label: t('deviceManage.temp_1_label'),
      isCustom: false,
    },
    temp_2: {
      label: t('deviceManage.temp_2_label'),
      isCustom: false,
    },
    emission_current_1: {
      label: t('deviceManage.emission_current_1_label'),
      isCustom: false,
    },
    emission_current_2: {
      label: t('deviceManage.emission_current_2_label'),
      isCustom: false,
    },
    receive_current_1: {
      label: t('deviceManage.receive_current_1_label'),
      isCustom: false,
    },
    receive_current_2: {
      label: t('deviceManage.receive_current_2_label'),
      isCustom: false,
    },
    receive_current_3: {
      label: t('deviceManage.receive_current_3_label'),
      isCustom: false,
    },
    receive_current_4: {
      label: t('deviceManage.receive_current_4_label'),
      isCustom: false,
    },
    voltage_1: {
      label: t('deviceManage.voltage_1_label'),
      isCustom: false,
    },
    voltage_2: {
      label: t('deviceManage.voltage_2_label'),
      isCustom: false,
    },
    voltage_3: {
      label: t('deviceManage.voltage_3_label'),
      isCustom: false,
    },
    voltage_4: {
      label: t('deviceManage.voltage_4_label'),
      isCustom: false,
    }
  }
})
async function getAntennaFaultStatus(data:any){
  antennaFaultStatus.value = data
}
const wsTaskData:any = {
  'ap_ant_phased_array_status':getAntennaStatus,
  'ap_ant_fault_status':getAntennaFaultStatus,
}
function handleWsMessage(response:any){
  const {cmd,data} = response
  if(wsTaskData[cmd]){
    wsTaskData[cmd](data)
  }
}
ws.on('message',handleWsMessage)
onMounted(()=>{
  getAntennaDevinfo()
})
</script>
  
<style lang="scss" scoped>
@import '@/styles/card.scss';

.hardware-container {
  width: 100%;

}

.device-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.info-item {
  background: linear-gradient(
    135deg,
    rgba(0, 108, 183, 0.1) 0%,
    rgba(0, 108, 183, 0.15) 50%,
    rgba(0, 108, 183, 0.1) 100%
  );
  border: 1px solid rgba(25, 65, 102, 0.6);
  border-radius: 8px;
  padding: 16px 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(0, 209, 237, 0.2);
    border-radius: 8px;
    pointer-events: none;
    transition: all 0.3s ease;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 15px 15px;
    pointer-events: none;
    opacity: 0.3;
  }
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.3),
      0 0 20px rgba(0, 209, 237, 0.15),
      inset 0 0 20px rgba(0, 209, 237, 0.1);
    
    &::before {
      border-color: rgba(0, 209, 237, 0.4);
      box-shadow: 0 0 15px rgba(0, 209, 237, 0.2);
    }
    
    .info-label {
      text-shadow: 0 0 10px rgba(0, 209, 237, 0.4);
    }
    
    .info-value {
      color: rgba(255, 255, 255, 1);
      text-shadow: 0 0 8px rgba(0, 209, 237, 0.3);
    }
  }
}

.info-label {
  font-size: 14px;
  color: rgba(0, 209, 237, 0.9);
  font-weight: 500;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  
  &::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 30%;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(0, 209, 237, 0.6),
      transparent
    );
  }
}

.info-value {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-family: 'Courier New', monospace;
  position: relative;
  z-index: 2;
  min-height: 24px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  
  &:empty::before {
    content: '123';
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .device-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .device-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 12px;
  }
  
  .info-item {
    padding: 12px 8px;
  }
  
  .info-label {
    font-size: 12px;
    margin-bottom: 6px;
  }
  
  .info-value {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .device-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
  